Show/Hide buttons based on radio selection

[Owen Funkhouser]

I have a form with three radio options. And I have three buttons:
<input type="submit" name="mainform_action" value="Edit Data">
<input type="submit" name="mainform_action" value="View Data">
<input type="submit" name="mainform_action" value="Delete Data">

If the first radio button is selected, I only want all three buttons to be
visible to the user.

If the second radio button is selected, I only want the "Edit Data" and "View
Data" buttons to be visible.

If the third radio button is selected, I only want the "View Data" button to be
visible.

Is it possible to accomplish this in Javascript? In particular, I want to
continue using the "input type=submit" buttons without having to create my own.

[Thomas 'PointedEars' Lahn]

Owen Funkhouser wrote:

I have a form with three radio options. And I have three buttons:
<input type="submit" name="mainform_action" value="Edit Data">
<input type="submit" name="mainform_action" value="View Data">
<input type="submit" name="mainform_action" value="Delete Data">

If the first radio button is selected, I only want all three buttons to be
visible to the user.

If the second radio button is selected, I only want the "Edit Data" and "View
Data" buttons to be visible.

If the third radio button is selected, I only want the "View Data" button to be
visible.

Is it possible to accomplish this in Javascript?
Yes, it is. Enclose the radio *buttons* in a `fieldset' element or leave
them as children of the `form' element. Use the `onchange' event handler
of either element to call a user-defined method that sets the either the
`visibility' property to `hide' or `show' (Netscape 4.x), or the
`style.visibility' property to `hidden' or `visible' (others), depending
on the value of the `checked' property of the radio buttons. Good luck!
In particular, I want to continue using the "input type=submit"
buttons without having to create my own.

Null problemo.
PointedEars

[Lasse Reichstein Nielsen]

Thomas 'PointedEars' Lahn <Po*********@web.de> writes:

Enclose the radio *buttons* in a `fieldset' element or leave them as
children of the `form' element. Use the `onchange' event handler of
either element

I didn't know that forms or fieldsets had onchange event handlers.
Checking the HTML 4.01 specification gives no mention of these.

I tested in IE 6, Opera 7 and Mozilla, using the following code:
---
<form onchange="alert('form')" action="">
<fieldset onchange="alert('field')"><legend>Test</legend>
<input name="too" onchange="alert('input')">
</fieldset>
</form>
---
and it threw all alerts in in Opera and Moz. In IE, only the input alert
was displayed.

The code is valid HTML 4.01 strict except for the onchange attributes
in the form and fieldset tags.

It seems these non-standard event handlers are not implemented in IE,
so a solution using them might not be generally applicable.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
~

[Larry Jaques]

On 23 Oct 2003 15:49:48 +0200, Lasse Reichstein Nielsen
<lr*@hotpop.com> brought forth from the murky depths:

Thomas 'PointedEars' Lahn <Po*********@web.de> writes:

Enclose the radio *buttons* in a `fieldset' element or leave them as
children of the `form' element. Use the `onchange' event handler of
either element

I didn't know that forms or fieldsets had onchange event handlers.
Checking the HTML 4.01 specification gives no mention of these.

I tested in IE 6, Opera 7 and Mozilla, using the following code:
---
<form onchange="alert('form')" action="">
<fieldset onchange="alert('field')"><legend>Test</legend>
<input name="too" onchange="alert('input')">
</fieldset>
</form>
---
and it threw all alerts in in Opera and Moz. In IE, only the input alert
was displayed.

Along the same line, I need to check for empty fields and am currently
using this script to do so. The problem is that it doesn't check radio
button fieldsets (or checkboxes). How would I add that in the simplest
way? All she wants me to check for are empties.

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: wsabstract.com -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function checkrequired(which) {
var pass=true;
if (document.images) {
for (i=0;i<which.length;i++) {
var tempobj=which.elements[i];
if (tempobj.name.substring(0,1)=="x") {
if (((tempobj.type=="text"||tempobj.type=="textarea") &&
tempobj.value=='')||(tempobj.type.toString().charA t(0)=="s"&&
tempobj.selectedIndex==0)) {
pass=false;
break;
}
}
}
}
if (!pass) {
shortFieldName=tempobj.name.substring(2,30).toUppe rCase();
alert("Please make sure the "+shortFieldName+" field is completed.");
return false;
}
else
return true;
}
// End -->
</script>

I add an x to the fieldname and strip off both the prefix letters
and the x. EG: name="xdname" is a required deliver-to name.

Is there a simple way to add radio button checking?